import DebugTab from '@/pages/InterfaceInfo/DebugTab';
import { getInterfaceInfoGet } from '@/services/LarlyAPI_backend/interfaceInfoController';
import { useParams } from '@@/exports';
import { ProCard } from '@ant-design/pro-components';
import { Card, message } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';

export default () => {
  const [InterfaceInfo, setInterfaceInfo] = useState<API.InterfaceInfoVo>();
  const [requestParams, setRequestParams] = useState<Record<string, string>>({});
  // 获取参数
  const { id } = useParams();
  // 获取接口信息
  const getInterfaceInfo = async () => {
    try {
      const res = await getInterfaceInfoGet({
        id: Number(id),
      });
      if (res.data) {
        setInterfaceInfo(res.data);
        setRequestParams(res.data.requestHeader ? JSON.parse(res.data.requestHeader) : {});
        message.success('获取成功');
      }
    } catch (e) {
      message.error('获取失败');
    }
  };
  useEffect(() => {
    getInterfaceInfo();
  }, []);
  return (
    <ProCard
      tabs={{
        type: 'card',
      }}
    >
      <ProCard.TabPane key="tab1" tab="基本信息">
        <Card title="Card title" style={{ width: '100%' }}>
          <p>接口名称：{InterfaceInfo?.name}</p>
          <p>接口描述：{InterfaceInfo?.description || '暂无描述'}</p>
          <p>接口地址：{InterfaceInfo?.url}</p>
          <p>请求方式：{InterfaceInfo?.method}</p>
          <p>请求参数：{InterfaceInfo?.requestParams || '无'}</p>
          <p>请求头：{InterfaceInfo?.requestHeader}</p>
          <p>响应头：{InterfaceInfo?.responseHeader || '无'}</p>
          <p>接口状态：{InterfaceInfo?.status ? '开启' : '关闭'}</p>
          <p>创建时间：{dayjs(InterfaceInfo?.createTime).format('YYYY-MM-DD HH:mm:ss')}</p>
        </Card>
      </ProCard.TabPane>
      {InterfaceInfo?.status === 1 && (
        <ProCard.TabPane key="tab2" tab="调式">
          <DebugTab
            id={id ?? ''}
            method={'POST'}
            url={InterfaceInfo?.url ?? ''}
            headers={requestParams}
          />
        </ProCard.TabPane>
      )}
    </ProCard>
  );
};
